<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/templateLayout.xhtml">

	<f:metadata>
		<f:viewParam name="id" value="#{propiedadBean.id}" />
		<f:event type="preRenderView" listener="#{propiedadBean.inicio()}" />
	</f:metadata>


	<ui:define name="centerContent">
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<h:panelGroup layout="block"
			class="title ui-widget-header ui-corner-all"
			style="padding: 8px; font-size: 16px !important; text-align: center;">
		
			<h:outputText value="#{msgs['form.propiedad.modificar']}" rendered="#{!empty propiedadBean.id}"/>
			<h:outputText value="#{msgs['form.propiedad.alta']}" rendered="#{empty propiedadBean.id}"/>
			

			<h:form id="create" prependId="false">
				<p:panel id="panelCreate">
					<p:messages  showDetail="true"  closable="true" showSummary="true"/>
					
					<p:panelGrid id="montos" style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="4">Montos</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column width="20">
								<h:outputLabel for="disponibilidad"
									value="#{msgs['form.disponibilidad']}#{msgs.obligatorio}" />
							</p:column>
							<p:column colspan="3">
								<p:selectOneMenu id="disponibilidad" style="width: 200px;"
									value="#{propiedadBean.entity.tipoDisponibilidad}">
									<f:selectItems value="#{utilsBean.disponibilidadSinTodos}" />
									<f:ajax event="change" render="montos" />
								</p:selectOneMenu>
								<p:message for="disponibilidad" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="montoalquiler"
									value="#{msgs['form.monto']} #{msgs['form.alquiler']}: " />
							</p:column>
							<p:column>
								<pe:inputNumber id="montoalquiler"
									disabled="#{!propiedadBean.renderAlquiler()}" required="true"
									requiredMessage="El campo es Obligatorio"
									value="#{propiedadBean.entity.montoMinimoAlquiler}"
									decimalPlaces="0" style="width:200px; text-align:right" />
								<p:message for="montoalquiler" />
							</p:column>
							<p:column>
								<h:outputLabel for="montoventa"
									value="#{msgs['form.monto']} #{msgs['form.venta']}: " />
							</p:column>
							<p:column>
								<pe:inputNumber id="montoventa"
									disabled="#{!propiedadBean.renderVenta()}" required="true"
									requiredMessage="El campo es Obligatorio"
									value="#{propiedadBean.entity.montoMinimoVenta}"
									decimalPlaces="0" style="width:200px; text-align:right" />
								<p:message for="montoventa" />
							</p:column>
						</p:row>
					</p:panelGrid>


					<p:panelGrid style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="4">Caracteristicas</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column>
								<h:outputLabel for="tipopropiedad"
									value="#{msgs['form.tipo']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:selectOneMenu id="tipopropiedad"
									value="#{propiedadBean.entity.propiedadTipo}"
									converter="#{propiedadTipoConvert}" effect="fade"
									style="width: 150px;">
									<f:selectItems value="#{propiedadBean.propiedadTipos()}"
										var="p" itemLabel="#{p.descripcion}" itemValue="#{p}"
										onValue="Seleccione Tipo" />
								</p:selectOneMenu>
								<p:message for="tipopropiedad" />
							</p:column>
							<p:column>
								<h:outputLabel for="cochera"
									value="#{msgs['form.cochera']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:selectBooleanCheckbox id="cochera"
									value="#{propiedadBean.entity.cochera}" />
								<p:message for="cochera" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="snpcanbanios"
									value="#{msgs['form.propiedad.cantbanios']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="snpcanbanios" size="10"
									value="#{propiedadBean.entity.cantBanios}" />
								<p:message for="snpcanbanios" />
							</p:column>
							<p:column>
								<h:outputLabel for="cantcocina"
									value="#{msgs['form.propiedad.cantcocina']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="cantcocina" size="10"
									value="#{propiedadBean.entity.cantCocinas}" />
								<p:message for="cantcocina" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="cantdormitorio"
									value="#{msgs['form.propiedad.cantdormitorio']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="cantdormitorio" size="10"
									value="#{propiedadBean.entity.cantDormitorios}" />
								<p:message for="cantdormitorio" />
							</p:column>
							<p:column>
								<h:outputLabel for="cantLiving"
									value="#{msgs['form.propiedad.cantLiving']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="cantLiving" size="10"
									value="#{propiedadBean.entity.cantLiving}" />
								<p:message for="cantLiving" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="cantToilette"
									value="#{msgs['form.propiedad.cantToilette']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="cantToilette" size="10"
									value="#{propiedadBean.entity.cantToilette}" />
								<p:message for="cantToilette" />
							</p:column>
							<p:column>
								<h:outputLabel for="cantLocalComercial"
									value="#{msgs['form.propiedad.cantLocalComercial']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:spinner id="cantLocalComercial" size="10"
									value="#{propiedadBean.entity.cantLocalComercial}" />
								<p:message for="cantLocalComercial" />
							</p:column>
						</p:row>

					</p:panelGrid>


					<p:panelGrid columns="3" style="width: 100%;text-align:left;">
						<f:facet name="header">Propietario</f:facet>
						<h:outputLabel for="propietario"
							value="#{msgs['form.apellidoNombre']}#{msgs.obligatorio}" />
						<p:autoComplete id="propietario" size="120"
							value="#{propiedadBean.entity.propietario}"
							completeMethod="#{propiedadBean.propietarios}" var="prop"
							itemLabel="#{prop.apellidoNombre()}" itemValue="#{prop}"
							converter="#{propietarioConvert}">
							<p:column>  
				               Dni: #{prop.dni}
				            </p:column>
							<p:column>  
				                #{prop.mail}
				            </p:column>
							<p:column>  
				                #{prop.apellido}, #{prop.nombre}  
				            </p:column>
						</p:autoComplete>
						<p:message for="propietario" />
					</p:panelGrid>

					<p:panelGrid id="formDireccionBarrio"
						style="width: 100%;text-align:left;">
						<f:facet name="header">
							<p:row>
								<p:column colspan="5">#{msgs['form.direccionubicacion']}</p:column>
							</p:row>
						</f:facet>
						
						<p:row>
							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.provincia']}#{msgs.obligatorio}" />
									<p:inputText readonly="true" id="provincia"	value="#{propiedadBean.entity.barrio.ciudad.provincia.descripcion}" />
							</p:column>
							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.ciudad']}#{msgs.obligatorio}" />
									<p:inputText readonly="true" id="ciudad"	value="#{propiedadBean.entity.barrio.ciudad.descripcion}" />
							</p:column>

							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.barrio']}#{msgs.obligatorio} #{propiedadBean.entity.barrio.descripcion}" />
							</p:column>

							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.zona']}#{msgs.obligatorio} #{propiedadBean.entity.barrio.zona}" />

							</p:column>
							<p:column>
								<p:commandButton value="#{msgs['form.barrio.buscar']}"
									onclick="dlg.show();" type="button" />
							</p:column>
						</p:row>
						
						
						<p:row>
							<p:column>
								<h:outputLabel for="calle"
									value="#{msgs['form.direccion']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:inputText id="calle" size="50"	value="#{propiedadBean.entity.direccion}">
										<p:ajax  event="change"  oncomplete="geolocalizar();"/>
								</p:inputText>
								<p:message for="calle" />
							</p:column>
							<p:column>
								<h:outputLabel for="numero"
									value="#{msgs['form.numero']}#{msgs.obligatorio}" />
								<p:spinner  value="#{propiedadBean.entity.numero}" size="7" min="0" >
										<p:ajax  event="change"  oncomplete="geolocalizar();" update="numero"/>
								</p:spinner>
								<h:inputHidden id="numero"		value="#{propiedadBean.entity.numero}" />		
								<p:message for="numero" />
							</p:column>
							<p:column>
								<h:outputLabel for="depto"
									value="#{msgs['form.depto']}:" />
								<p:inputText id="depto" value="#{propiedadBean.entity.dpto}"
									size="5" />
								<p:message for="depto" />
							</p:column>
							<p:column>
								<h:outputLabel for="piso"
									value="#{msgs['form.piso']}:" />
								<p:spinner id="piso" value="#{propiedadBean.entity.piso}"
									size="5" min="0" />
								<p:message for="piso" />
							</p:column>
						</p:row>
						
						
						
						
						
						<p:row>
							<p:column colspan="1">
								<h:outputLabel value="#{msgs['seleccionar.en.mapa']}: " />

							</p:column>
							<p:column colspan="1">
								<p:commandButton type="button" icon="ui-icon-pin-s"
									value="#{msgs['mapa']}" onclick="dlg_map.show()" />
							</p:column>
						</p:row>
					</p:panelGrid>

					<f:facet name="footer">
						<ui:include src="/templates/toolbarCreate.xhtml">
							<ui:param name="bean" value="#{propiedadBean}" />
						</ui:include>
					</f:facet>
				</p:panel>

			
			

			<h:inputHidden id="lat"
				value="#{propiedadBean.entity.coordenada.lat}" />
				
			<h:inputHidden id="lng"
				value="#{propiedadBean.entity.coordenada.lng}" />
		
				
			<p:dialog id="dialog"
					header="#{msgs['form.barrio.buscar']}"
					closeOnEscape="true" showEffect="clip" hideEffect="clip"
					closable="true" resizable="false" widgetVar="dlg" width="480">
					
					<p:dataTable id="list" var="item" value="#{barrioBean.list}"
						rowKey="#{item.id}" lazy="true" selectionMode="single"
						selection="#{barrioBean.entity}" paginator="true"
						paginatorPosition="bottom"  filterDelay="1000" emptyMessage="#{msgs['lista.vacia']}"
						rows="8" paginatorTemplate="{PreviousPageLink} {PageLinks} {NextPageLink}">
						
						<p:ajax event="rowSelect" listener="#{barrioBean.onRowSelect}" />


						<p:column headerText="#{msgs['form.provincia']}"
							filterBy="#{item.ciudad.provincia.descripcion}"
							sortBy="#{item.ciudad.provincia.descripcion}">
							<h:outputText value="#{item.ciudad.provincia.descripcion}" />
						</p:column>

						<p:column headerText="#{msgs['form.ciudad']}"
							filterBy="#{item.ciudad.descripcion}"
							sortBy="#{item.ciudad.descripcion}">
							<h:outputText value="#{item.ciudad.descripcion}" />
						</p:column>
						<p:column headerText="#{msgs['form.descripcion']}"
							filterBy="#{item.descripcion}" sortBy="#{item.descripcion}">
							<h:outputText value="#{item.descripcion}" />							
						</p:column>
						<p:column>
							<p:commandButton value="Sel." immediate="true"
								oncomplete="dlg.hide();geolocalizar();"
								action="#{propiedadBean.entity.setBarrio(item)}"
								update=":create:formDireccionBarrio"/>
						</p:column>

					</p:dataTable>

				</p:dialog>
				

			</h:form>
			
			<p:growl id="mensajes" showDetail="true" />
			
			<p:dialog widgetVar="dlg_map" width="625" height="430" modal="true"
				closeOnEscape="true" showEffect="clip" hideEffect="clip" 
				closable="true" resizable="false" appendToBody="true">
				<p:gmap id="gmap" center="#{propiedadBean.coordenadas.lat},#{propiedadBean.coordenadas.lng}"
					zoom="13" type="MAP" style="width:600px;height:400px"
					model="#{propiedadBean.mapaModel}"
					onPointClick="handlePointClick(event);" widgetVar="map">
					<p:ajax event="pointSelect"
						listener="#{propiedadBean.onPointSelect}" update="mensajes" />
				</p:gmap>
			</p:dialog>
			
			

			<script type="text/javascript">
				var currentMarker = null;
				var geocoder = new google.maps.Geocoder();
				function addCurrentMarker(){
					map.addOverlay(currentMarker);					
				}
				
				function handlePointClick(event) {
					setpuntos(event.latLng
							.lat(), event.latLng.lng());
				}

				function setpuntos(lat,lng) {

					if (currentMarker == null) {

						currentMarker = new google.maps.Marker({
							position : new google.maps.LatLng(lat, lng),
							icon : "#{request.contextPath}/resources/images/gmap-icon-disponible.png"
									});

						addCurrentMarker();
					} else {
						currentMarker.setPosition(new google.maps.LatLng(lat, lng));
					}
					$('#lat').val(lat);
					$('#lng').val(lng);
				}

							
			
				$(document).ready(function() {
					if (#{propiedadBean.entity.marcada()}){
						currentMarker = new google.maps.Marker({
							position : new google.maps.LatLng(#{propiedadBean.entity.coordenada.lat},
									#{propiedadBean.entity.coordenada.lng}),
							icon : "#{request.contextPath}/resources/images/gmap-icon-disponible.png"
							});
						addCurrentMarker();
					}
				});
				
				function geolocalizar(){										
					var direccion = $('#calle').val() +" "+  $('#numero').val() +" , "+ $('#ciudad').val() + " ," + $('#provincia').val(); 	
					if (($('#calle').val()!='') &#38;&#38; ($('#numero').val()!='') &#38;&#38; ($('#ciudad').val()!=''))
					{
						geocoder.geocode({'address': direccion}, function(results, status) {
							if (status == google.maps.GeocoderStatus.OK) { 
								$('#latG').val(results[0].geometry.location.lat());
								$('#lngG').val(results[0].geometry.location.lng());								
								setpuntos(results[0].geometry.location.lat(),results[0].geometry.location.lng());
							}else 
							{
								errMSG.innerHTML = "Error " + status; 
							} 
						});			
					}					
				}			
				
			</script>
		</h:panelGroup>
	</ui:define>
</ui:composition>
</html>
